<template>
	<page-meta :page-style="'overflow:'+(scrollShow?'hidden':'visible')"></page-meta><!--滚动穿透-->
	<view>
		<view class="hyxinxi-wrap">
			
	
		<!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
		<u--form
			labelPosition="left"
			:model="authInfo"
			ref="form1"
			labelWidth="auto"
		>
			<u-form-item label="选手姓名" prop="trueName" :required="rules['trueName'][0].required">
				<u--input v-model="authInfo.trueName" placeholder="请填写选手姓名" :disabled="isGoAuth" />
			</u-form-item>
			<u-form-item label="联系方式" prop="phonenumber" :required="rules['phonenumber'][0].required">
				<u--input placeholder="请填写联系方式" v-model="authInfo.phonenumber" type="number"
				 maxlength="11" :disabled="isGoAuth"/>
			</u-form-item>
			<u-form-item label="准驾类型"  :required="rules['driverType'][0].required"
				prop="driverType"
				@click="showJiazhao = isGoAuth?false:true; hideKeyboard()">
				<u--input v-model="authInfo.driverType"
					disabled placeholder="请选择准驾类型"
				/>
			</u-form-item>
			<view>
				<u-form-item label="申请类型[至少选择一项]" ></u-form-item>
				<view>
					<u-form-item label="汽车类"
						prop="applyCar"
						@click="showQiche = isGoAuth?false:true; hideKeyboard()">
						<u--input v-model="authInfo.applyCar"
							disabled
							placeholder="请选择汽车类"
						/>
					</u-form-item>
					<u-form-item label="摩托车类"
						prop="applyMotorbike"
						@click="showmotuoche = isGoAuth?false:true; hideKeyboard()">
						<u--input v-model="authInfo.applyMotorbike"
							disabled
							placeholder="请选择摩托车类"
						/>
					</u-form-item>
					<u-form-item label="全地形类"
						prop="authInfo.applyLandform"
						@click="showdixing =isGoAuth?false:true; hideKeyboard()">
						<u--input v-model="authInfo.applyLandform"
							disabled
							placeholder="请选择全地形类"
						/>
					</u-form-item>

				</view>
			</view>
			
			<u-form-item label="上传证件" labelPosition="top" >
				<view style="margin:0 auto;margin-top:20px;">
					
						<u-upload :disabled="isGoAuth" :fileList="fileList6" @afterRead="afterRead" @delete="deletePic"
						name="6"
						multiple
						:maxCount="1"
						width="500rpx"
						height="300rpx"
					
						>
							<image src="../../static/images/userInfo/shenfenzhenA.png" 
							mode="widthFix" style="width: 500rpx;height: 300rpx;"></image>
						</u-upload>
				
					<u--text lineHeight="30px;" text="身份证正面" align="center" color="#9a9ca0" size="13"/>
					</view>
					<view style="margin:0 auto;margin-top:20px;">
						<u-upload :disabled="isGoAuth" :fileList="fileList7" @afterRead="afterRead" @delete="deletePic"
						name="7"
						multiple
						:maxCount="1"
						width="500rpx"
						height="300rpx"
					
						>
							<image src="../../static/images/userInfo/shenfenzhenB.png" 
							mode="widthFix" style="width: 500rpx;height: 300rpx;"></image>
						</u-upload>
						<u--text lineHeight="30px;" text="身份证反面" align="center" color="#9a9ca0" size="13"/>
						</view>
						<view style="margin:0 auto;margin-top:20px;">
							<u-upload :disabled="isGoAuth" :fileList="fileList8" @afterRead="afterRead" @delete="deletePic"
							name="8"
							multiple
							:maxCount="1"
							width="500rpx"
							height="300rpx"
						
							>
								<image src="../../static/images/userInfo/jiashizhen.png" 
								mode="widthFix" style="width: 500rpx;height: 300rpx;"></image>
							</u-upload>
							<u--text lineHeight="30px;" text="驾驶证" align="center" color="#9a9ca0" size="13"/>
							</view>
			</u-form-item>
			
			
			
		</u--form>
		<image src="../../static/images/userInfo/ksrz.png" 
		style="width: 329rpx;height: 107rpx;display: block;margin: 10px auto;"
		@click="submit"
		/>

		<!-- 驾驶车型选择 -->
		 <u-picker
		 	:show="showJiazhao"
		 	:columns="jiazhaoData"
		 	@cancel="showJiazhao = false"
		 	@confirm="jiazhaoSelect"
		 ></u-picker>
		<!-- 汽车类选择 -->
		<u-picker
			:show="showQiche"
			:columns="qicheData"
			@cancel="showQiche = false"
			@confirm="qicheSelect"
		></u-picker>
		<!-- 摩托车类选择 -->
		<u-picker
			:show="showmotuoche"
			:columns="motuocheData"
			@cancel="showmotuoche = false"
			@confirm="motuocheSelect"
		></u-picker>
		<!-- 地形类选择 -->
		<u-picker
			:show="showdixing"
			:columns="dixingData"
			@cancel="showdixing = false"
			@confirm="dixingSelect"
			></u-picker>
		</view>
		
	</view>
</template>

<script>
	import {mapActions,mapState} from 'vuex'
	export default {
		data() {
			return {
				isGoAuth:false,//是否通过认证
				fileList6:[],//身份证前
				fileList7:[],//身份证后
				fileList8:[],//驾驶证
				showJiazhao:false,//驾照类型数据显示隐藏
				jiazhaoData: [
					['A1', 'A2', 'A3','B1','B2','C1','C2','C3','C4','其他']
				],//驾驶车型数据
				showQiche:false,//汽车类数据显示隐藏
				qicheData: [
					['场地类','拉力越野类','漂移类','卡丁车类']
				],//驾驶车型数据
				showmotuoche:false,//汽车类数据显示隐藏
				motuocheData: [
					[ '场地类', '越野类','技巧类'],
				],//驾驶地型数据
				showdixing:false,//全地形类
				dixingData:[
					[ 'ATV', 'UTV','雪地摩托'],
				],
				authInfo:{
					trueName:'',
					phonenumber:'',
					driverType:'',
					applyCar:'',
					applyMotorbike:'',
					applyLandform:'',
					imgCardFront:[],
					imgCardReverse:[],
					imgCardDriver:[]
					
				},
				rules: {
					//姓名
					trueName: [{
						required:true,
						type: 'string',
						message: '请填写姓名',
						trigger: ['blur', 'change']
					}, {
						// 此为同步验证，可以直接返回true或者false，如果是异步验证，稍微不同，见下方说明
						validator: (rule, value, callback) => {
							// 调用uView自带的js验证规则，详见：https://www.uviewui.com/js/test.html
							return uni.$u.test.chinese(value);
							
						},
						message: "姓名必须为中文",
						// 触发器可以同时用blur和change，二者之间用英文逗号隔开
						trigger: ["change", "blur"],
					}],
					//电话号码
					phonenumber:[
						{
							required:true,
							type: 'string',
							message: '请填写电话号码',
							trigger: ["change", "blur"]
						},
						{
							validator: (rule, value, callback) => {
								return uni.$u.test.mobile(value);
							},
							message: "电话号码格式不正确",
							// 触发器可以同时用blur和change，二者之间用英文逗号隔开
							trigger: [ "blur","change"],
						},
					],
					//准驾类型
					driverType:[
						{
							required:true,
							type: 'string',
							message: '请选择准驾类型',
							trigger: ["change", "blur"]
						},
					],
					//参赛类型
					/* "userAuth.applyCar":[
						{
							required:true,
							type: 'string',
							message: '请选择汽车类',
							trigger: ["change", "blur"]
						},
					],
					"userAuth.applyMotorbike":[
						{
							required:true,
							type: 'string',
							message: '请选择摩托车类',
							trigger: ["change", "blur"]
						},
					],
					"userAuth.applyLandform":[
						{
							required:true,
							type: 'string',
							message: '请选择全地形类',
							trigger: ["change", "blur"]
						},
					], */
				}
				
			};
		},
		computed:{
			...mapState('m_login',['userInfo'])
		},
		onLoad() {
				if(!uni.$u.test.isEmpty(this.userInfo.userAuth)){
					if(this.userInfo.userAuth.auditStatus==1){//认证通过状态不能修改
						this.isGoAuth=true
					}else{
						this.isGoAuth=false
					}
				}
				
		},
		onReady() {
			// 如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则
			this.$refs.form1.setRules(this.rules)
		},
		methods:{
			...mapActions('m_userInfo',['addAuthInfoAction']),
			//选择驾驶类型
			jiazhaoSelect(e){
				this.authInfo.driverType=e.value[0]
				this.$refs.form1.validateField('driverType')
				this.showJiazhao=false;
			},
			//选择汽车类型
			
			qicheSelect(e){
				this.authInfo.applyCar=e.value[0]
				//this.$refs.form1.validateField('this.userInfo.userAuth.applyCar')
				this.showQiche=false;
			},
			
			//选择摩托车类型
			motuocheSelect(e){
				this.authInfo.applyMotorbike=e.value[0]
				//this.$refs.form1.validateField('this.userInfo.userAuth.applyMotorbike')
				this.showmotuoche=false;
			},
			//地形选择
			
			dixingSelect(e){
				this.authInfo.applyLandform=e.value[0]
				//this.$refs.form1.validateField('this.userInfo.userAuth.applyLandform')
				this.showdixing=false;
			},
			//隐藏软键盘
			hideKeyboard() {
				uni.hideKeyboard()
			},
			
			
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			//图片上传
			//图片上传afterRead[文件读取后]
			async afterRead(event) {
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFile(lists[i].url)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result.data.fileName
					}))
					fileListLen++
				}
				//提交数据
				this.authInfo.imgCardFront=[...this.fileList6.map(it=>it.url)][0]
				this.authInfo.imgCardReverse=[...this.fileList7.map(it=>it.url)][0]
				this.authInfo.imgCardDriver=[...this.fileList8.map(it=>it.url)][0]
				
			},
			//上传接口
			uploadFile(data){
				return uni.$u.http.upload('/common/uploadCTOss',{filePath:data,name:'file' ,custom: {auth: true}})
			},
			//重置表单对象和上传回显
			resetAuthInfo(){
				this.authInfo={
					trueName:'',
					phonenumber:'',
					driverType:'',
					applyCar:'',
					applyMotorbike:'',
					applyLandform:'',
					imgCardFront:[],
					imgCardReverse:[],
					imgCardDriver:[]
					
				},
				this.fileList6=[]
				this.fileList7=[]
				this.fileList8=[]
			},
			//提交验证
			submit() {
				// 如果有错误，会在catch中返回报错信息数组，校验通过则在then中返回true
				this.$refs.form1.validate().then(res => {
					if(uni.$u.test.isEmpty(this.authInfo.imgCardFront))  return uni.$u.toast('请上传身份证正面')
					if(uni.$u.test.isEmpty(this.authInfo.imgCardReverse)) return uni.$u.toast('请上传身份证反面')
					if(uni.$u.test.isEmpty(this.authInfo.imgCardDriver)) return uni.$u.toast('请上传身份证反面')
					if(uni.$u.test.isEmpty(this.authInfo.driverType)&&uni.$u.test.isEmpty(this.authInfo.applyMotorbike)&&uni.$u.test.isEmpty(this.authInfo.applyCar)) return uni.$u.toast('选择类型至少选1项')
					console.log(this.authInfo)
					this.addAuthInfoAction({data:JSON.stringify(this.authInfo)})
					//清除表单和上传回显
					this.resetAuthInfo({})
					uni.$u.toast('校验通过')
					uni.$u.route({
									url: 'pages/my/my',
									type:'switchTab'
								})
				}).catch(errors => {
					console.log(errors)
					uni.$u.toast('校验失败')
				})
			},
			//重置表单
			reset() {
				const validateList = ['userName', 'phoneNumber', 'driverType']
				this.$refs.form1.resetFields()
				this.$refs.form1.clearValidate()
				setTimeout(()=>{
					this.$refs.form1.clearValidate(validateList)
					// 或者使用 this.$refs.form1.clearValidate()
				},10)
			},
		},
		
	}
</script>

<style lang="scss" scoped>
	.hyxinxi-wrap{background-color: #fff;padding: 30rpx;}

</style>
